<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view :prop="option" :change:prop="echarts.updateEcharts" id="roundCharts" class="echarts"></view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option: {
					legend: {
					    //top: '5%',
					    left: 'center'
					},
					series: [
					    //-------------最底圈开始---------------
					    {
					        type: 'pie',
					        radius: ['73%', '90%'],
					        avoidLabelOverlap: false,
							startAngle: 270,
					        emphasis: {
					            //关闭高亮显示
					            disabled: true
					        },
					        data: [{
					            value: 360,
					            itemStyle: {
					                color: "#F1F1F1",
					                decal: {
					                    symbol: 'none'
					                }
					            },
					            label: {
					                show: false
					            }
					        }]
					    },
					    //-------------热量差开始---------------
						{
					        type: 'pie',
					        radius: ['70%', '95%'],
					        startAngle: 320,
					        emphasis: {
					            disabled: true
					        },
					        data: [{
					                value: 0,
					                itemStyle: {
					                    color: {
					                        type: 'linear',
					                        x: 0,
					                        y: 0.1,
					                        x2: 1,
					                        y2: 0.1,
					                        colorStops: [{
					                                offset: 0,
					                                color: "#F3E2D4", // 0% 处的颜色
					                            },
					                            {
					                                offset: 1,
					                                color: "#FFAF68", // 0% 处的颜色
					                            }
					                        ],
					                    },
					                    shadowColor: 'rgba(0, 0, 0, 0.1)',
					                    shadowBlur: 7,
					                    borderRadius: "50%",
					                    borderColor: '#ffffff',
					                    borderWidth: 1
					                },
					                label: {
					                    show: false,
					                }
					            },
					            {
					                value: 360,
					                itemStyle: {
					                    color: 'none',
					                    decal: {
					                        symbol: 'none'
					                    }
					                },
					                label: {
					                    show: false
					                }
					            }
					        ]
					    },
						//-------------摄入开始---------------
						{
							type: 'pie',
							radius: ['68%', '95%'],
							startAngle: 0,
							emphasis: {
							    disabled: true
							},
							data: [{
							        value: -1,
							        itemStyle: {
							            color: {
							                type: 'linear',
							                x: 0,
							                y: 0,
							                x2: 0,
							                y2: 1,
							                colorStops: [{
							                        offset: 0,
							                        color: "#27E2A7", // 0% 处的颜色
							                    },
							                    {
							                        offset: 1,
							                        color: "#E0FDF6", // 0% 处的颜色
							                    }
							                ],
							            },
							            shadowColor: 'rgba(0, 0, 0, 0.1)',
							            shadowBlur: 7,
							            borderRadius: "50%",
							            borderColor: '#ffffff',
							            borderWidth: 1
							        },
							        label: {
							            show: false,
							        }
							    },
							    {
							        value: 360,
							        itemStyle: {
							            color: 'none',
							            decal: {
							                symbol: 'none'
							            }
							        },
							        label: {
							            show: false
							        }
							    }
							]
						}
					]
				}
			}
		},
		props:{
			optionData:{
				type:Object,
				default:()=>{}
			}
		},
		watch: {  
		// 监听propValue的变化  
			optionData(newVal, oldVal) { 
				console.log('optionData变化了！'); 
				//console.log('新值：', newVal);  
				//console.log('旧值：', oldVal);  
				this.changeOption(newVal)
				
				
				
			// 在这里可以执行你想要的操作  
				//console.log(this.option)
			}
		},
		onLoad() {
			console.log(this.option)
			this.changeOption(this.props.optionData)
			
		},
		methods: {
			changeOption(chartInfo) {
				if(chartInfo.ingest>0){
					if(chartInfo.ingest<25)chartInfo.ingest = 25;
					//if(option.series.length===2)option.series.push(ingestion);
					this.option.series[2].startAngle = 320 - chartInfo.difference + 10;
					this.option.series[2].data[0].value = chartInfo.ingest;
					this.option.series[2].data[1].value = 360 - chartInfo.ingest;
					if(chartInfo.ingest>=360){
						this.option.series[2].data[0].itemStyle.color.colorStops[0].color = "#FB6957"
						this.option.series[2].data[0].itemStyle.color.colorStops[1].color = "#FB6957"
						
					}else{
						this.option.series[2].data[0].itemStyle.color.colorStops[0].color = "#27E2A7"
						this.option.series[2].data[0].itemStyle.color.colorStops[1].color = "#E0FDF6"
					}
				}else{
					if(option.series.length===3){
						this.option.series[2].data[0].value = -1;
						this.option.series[2].data[1].value = 360;
					}
				}
			},
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/js/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('roundCharts'))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option)
				console.log("初始化--------------------------------------------------------")
				console.log(myChart)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				console.log("数据层改变了--------------------------------------------------------")
				console.log(newValue)
				// 监听 service 层数据变更
				myChart.setOption(newValue)
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.echarts {
		width: 100%;
		height: 100%;
	}
</style>
